<template>
    <lay-container
      fluid="true"
      style="padding: 10px">
      <lay-row :space="10">
        <lay-col :md="24">
          <lay-card>
            <lay-form
              style="margin-top: 20px"
              :model="queryParams"
              size="xs">
              <lay-row>
                <lay-col :md="16">
                  <lay-form-item label="部门:">
                    <TreeSelect
                      class="w-[100%]"
                      v-model="searchAccount"
                      v-model:hasChildValue="queryParams.hasChildValue"
                      v-model:hasStopValue="queryParams.hasStopValue"
                      hasChild
                      :hasStop="true" />
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="工号:">
                    <lay-input v-model="searchEmail"></lay-input>
                  </lay-form-item>
                </lay-col>
              </lay-row>
              <lay-row>
                <lay-col :md="8">
                  <lay-form-item label="中文名:">
                    <lay-input v-model="searchEmail"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="姓名:">
                    <lay-input v-model="searchEmail"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="性别:">
                    <lay-select
                      v-model="queryParams.email"
                      style="width: 100%"
                      placeholder="请选择">
                      <lay-select-option
                        :value="1"
                        label="" />
                      <lay-select-option
                        :value="2"
                        label="男" />
                      <lay-select-option
                        :value="3"
                        label="女" />
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="员工状态:">
                    <lay-select
                      v-model="queryParams.email"
                      style="width: 100%"
                      placeholder="请选择">
                      <lay-select-option
                        :value="1"
                        label="学习" />
                      <lay-select-option
                        :value="2"
                        label="编码" />
                      <lay-select-option
                        :value="3"
                        label="运动" />
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="职位:">
                    <lay-select
                      v-model="queryParams.email"
                      style="width: 100%"
                      placeholder="请选择">
                      <lay-select-option
                        :value="1"
                        label="学习" />
                      <lay-select-option
                        :value="2"
                        label="编码" />
                      <lay-select-option
                        :value="3"
                        label="运动" />
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="入职日期:">
                    <lay-date-picker
                      style="width: 100%"
                      v-model="queryParams.email"
                      allowClear></lay-date-picker>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label="离职日期:">
                    <lay-date-picker
                      style="width: 100%"
                      v-model="queryParams.email"
                      allowClear></lay-date-picker>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="8">
                  <lay-form-item label-width="0">
                    <lay-button
                      type="primary"
                      @click="toSearch"
                      >查询</lay-button
                    >
                    <lay-button @click="toReset">重置</lay-button>
                  </lay-form-item>
                </lay-col>
              </lay-row>
            </lay-form>
          </lay-card>
        </lay-col>
        <lay-col :md="24">
          <lay-card>
            <lay-table
              :page="page"
              :columns="columns"
              :dataSource="dataSource"
              :default-toolbar="defaultToolbar"
              v-model:selectedKeys="selectedKeys"
              size="sm"
              @row="rowClick"
              @change="change">
              <template v-slot:toolbar>
                <lay-button
                  size="sm"
                  type="primary"
                  >新增</lay-button
                >
                <lay-button size="sm">删除</lay-button>
              </template>
              <template v-slot:username="{ data }">
                {{ data.username }}
              </template>
              <template v-slot:password="{ data }">
                {{ data.password }}
              </template>
              <template v-slot:operator="{}">
                <lay-button
                  size="xs"
                  type="primary"
                  >修改</lay-button
                >
                <lay-button size="xs">删除</lay-button>
              </template>
              <template v-slot:footer>
                {{ selectedKeys }}
              </template>
            </lay-table>
          </lay-card>
        </lay-col>
      </lay-row>
    </lay-container>
  </template>
  
  <script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { layer } from '@layui/layer-vue';
  
  const selectedKeys = ref(['1']);
  const checkbox = ref(true);
  const defaultToolbar = ref(true);
  
  const queryParams = ref({});
  
  const page = ref({ total: 100, limit: 10, current: 2 });
  
  const columns = [
    {
      title: '部门',
      width: '155px',
      fixed: 'left',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '工号',
      width: '80px',
      key: 'name',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '姓名',
      width: '180px',
      key: 'status',
      customSlot: 'status',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '工资编号',
      width: '120px',
      key: 'email',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '性别',
      width: '80px',
      key: 'sex',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '员工状态',
      width: '80px',
      key: 'age',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '职位',
      width: '120px',
      key: 'city',
      sort: 'desc',
      ellipsisTooltip: true,
    },
    {
      title: '详细',
      width: '60px',
      customSlot: 'operator',
      key: 'operator',
      fixed: 'right',
      ignoreExport: true,
    },
  ];
  
  const dataSource = [
    {
      id: '1',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '2',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '3',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '4',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '5',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '6',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '7',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '8',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '9',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '10',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
    {
      id: '11',
      username: 'shana',
      password: '夏娜',
      remark: '花开堪折直须折,莫待无花空折枝',
      age: '22',
    },
  ];
  
  const rowClick = function (data: any) {};
  
  const rowDoubleClick = function (data: any) {};
  
  const change = function ({ current, limit }: any) {
    layer.msg('current:' + current + ' limit:' + limit);
  };
  function toSearch() {
    layer.load(2, { time: 3000 });
  }
  const searchAccount = ref('');
  const searchEmail = ref('');
  function toReset() {
    searchAccount.value = '';
    searchEmail.value = '';
  }
  
  // return {
  //   columns,
  //   dataSource,
  //   selectedKeys,
  //   checkbox,
  //   defaultToolbar,
  //   page,
  //   rowClick,
  //   rowDoubleClick,
  //   change,
  //   toReset,
  //   toSearch,
  //   searchAccount,
  //   searchEmail
  // }
  </script>
  